<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Management</title>
    <!-- Load Vue 2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- Load Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Load Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Load axios for HTTP requests -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <style>
        .app-container {
            padding: 20px;
        }
        .mb8 {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="员工姓名" prop="name">
            <el-input
                    v-model="queryParams.name"
                    placeholder="请输入员工姓名"
                    clearable
                    @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="职位" prop="position">
            <el-input
                    v-model="queryParams.position"
                    placeholder="请输入职位"
                    clearable
                    @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
            <el-input
                    v-model="queryParams.email"
                    placeholder="请输入电子邮件"
                    clearable
                    @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
            <el-input
                    v-model="queryParams.phone"
                    placeholder="请输入电话号码"
                    clearable
                    @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="入职日期" prop="hireDate">
            <el-date-picker clearable
                            v-model="queryParams.hireDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择入职日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
            >新增
            </el-button>
        </el-col>

        <el-col :span="1.5">
            <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
            >删除
            </el-button>
        </el-col>
        <el-col :span="1.5">

        </el-col>
    </el-row>

    <el-table
            ref="multipleTable"
            :data="employeeList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="employeeId"
                label="员工ID"
                width="120">
        </el-table-column>
        <el-table-column
                prop="name"
                label="员工姓名"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="position"
                label="职位"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="email"
                label="电子邮件"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="hireDate"
                label="入职日期"
                show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.hireDate, '{y}-{m}-{d}') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="150">
            <template slot-scope="scope">
                <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                >修改</el-button>
                <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            v-show="total>0"
            :total="total"
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            @current-change="getList"
            @size-change="getList"
            layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 添加或修改员工管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="员工姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入员工姓名"/>
            </el-form-item>
            <el-form-item label="职位" prop="position">
                <el-input v-model="form.position" placeholder="请输入职位"/>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email">
                <el-input v-model="form.email" placeholder="请输入电子邮件"/>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入电话号码"/>
            </el-form-item>
            <el-form-item label="入职日期" prop="hireDate">
                <el-date-picker clearable
                                v-model="form.hireDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择入职日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</div>

<script>
    // Helper function to format date
    function parseTime(time, cFormat) {
        if (!time) return '';
        const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
        let date;
        if (typeof time === 'object') {
            date = time;
        } else {
            if (('' + time).length === 10) time = parseInt(time) * 1000;
            date = new Date(time);
        }
        const formatObj = {
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            i: date.getMinutes(),
            s: date.getSeconds(),
            a: date.getDay()
        };
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
            let value = formatObj[key];
            if (key === 'a') return ['日', '一', '二', '三', '四', '五', '六'][value];
            if (result.length > 0 && value < 10) {
                value = '0' + value;
            }
            return value || 0;
        });
        return time_str;
    }

    // 配置axios默认设置
    axios.defaults.baseURL = 'http://localhost:8080'; // 根据实际后端地址修改
    axios.interceptors.response.use(
        response => {
            return response.data;
        },
        error => {
            console.error('API请求错误:', error);
            return Promise.reject(error);
        }
    );

    new Vue({
        el: '#app',
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 员工管理表格数据
                employeeList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: null,
                    position: null,
                    email: null,
                    phone: null,
                    hireDate: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "员工姓名不能为空", trigger: "blur"}
                    ],
                    email: [
                        {required: true, message: "电子邮件不能为空", trigger: "blur"}
                    ],
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询员工管理列表 */
            getList() {
                this.loading = true;
                axios.get('/system/employee/list', {
                    params: this.queryParams
                }).then(response => {
                    this.employeeList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                    this.$message.error('获取员工列表失败');
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    employeeId: null,
                    name: null,
                    position: null,
                    email: null,
                    phone: null,
                    hireDate: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.employeeId)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加员工";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const employeeId = row.employeeId || this.ids[0];
                axios.get(`/system/employee/${employeeId}`).then(response => {
                    this.form = response;
                    this.open = true;
                    this.title = "修改员工信息";
                }).catch(error => {
                    this.$message.error('获取员工信息失败');
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        const request = this.form.employeeId != null
                            ? axios.put('/system/employee', this.form)
                            : axios.post('/system/employee', this.form);

                        request.then(response => {
                            this.$message({
                                message: this.form.employeeId != null ? "修改成功" : "新增成功",
                                type: "success"
                            });
                            this.open = false;
                            this.getList();
                        }).catch(error => {
                            this.$message.error(this.form.employeeId != null ? "修改失败" : "新增失败");
                        });
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const employeeIds = row.employeeId || this.ids;
                this.$confirm('是否确认删除选中的员工?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return axios.delete(`/system/employee/${employeeIds}`);
                }).then(() => {
                    this.getList();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error => {
                    if (error !== 'cancel') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    }
                });
            },
            /** 导出按钮操作 */

            resetForm(formName) {
                if (this.$refs[formName]) {
                    this.$refs[formName].resetFields();
                }
            },
            parseTime
        }
    });
</script>
</body>
</html>